<template>
    <Card>
        <!--查询条件-->
        <Row class="form-row">
            <Form :model="filters" ref="form_query" label-position="right" :label-width="90" inline>
                <FormItem label="小区名称" prop="name">
                    <div class="filters-input">
                        <el-select v-model="filters.housingId" @change="loadData" filterable default-first-option
                                   placeholder="请选择小区" :clearable="true" no-data-text="暂无数据">
                            <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </FormItem>
                <!--<FormItem>
                    <Button type="primary" icon="ios-search" @click="loadData">
                        搜索
                    </Button>
                </FormItem>-->
            </Form>
        </Row>

        <!--数据展示-->
        <Row>
            <el-table stripe border :data="tableData" >
                <el-table-column label="停车场名称" prop="parkingName"></el-table-column>
                <el-table-column label="所属小区" prop="housingName"></el-table-column>
                <el-table-column label="总车位数" prop="carPort"></el-table-column>
                <el-table-column label="对外车位数" prop="foreignCarPort"></el-table-column>
                <el-table-column label="支付方式">
                    <template slot-scope="scope">
                        <p v-if="scope.row.paymentMethod==1">微信</p>
                        <p v-if="scope.row.paymentMethod==2">云支付</p>
                        <p v-if="scope.row.paymentMethod==3">富友</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="350px">
                    <template slot-scope="scope">
                        <Button type="primary" style="margin-left: 10px" @click="downloadQrcode(scope.row)">下载二维码</Button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize"
                  show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Row>
    </Card>
</template>

<script>
    import baseURL from "_conf/url";

    export default {
        data(){
            return{
                pageTotal:0,
                pageNum:1,
                pageSize:10,
                ownParkId:"",
                housing:"",
                paymentMethod:"",
                tableData:[],
                houseList:[],

                filters:{},
            }
        },
        created:function(){
            this.getHouse();
        },
        methods:{
            getHouse(){
                this.postRequest("/api/housing/getHousingByLogin").then(resp => {
                    this.houseList = resp;
                    this.filters.housingId = resp[0].id;
                    this.loadData();
                });
            },
            loadData(){
                let params="&housingId="+this.filters.housingId
                this.getRequest("/api/park/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+params).then(resp=>{
                    if (resp.code==20000){
                        this.pageTotal=resp.data.total;
                        this.tableData=resp.data.list;
                    }
                });
            },
            downloadQrcode(row){
                location.href = baseURL + '/api/park/download/qrcode?id=' + row.id;
            },
            handlePage(value){
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value){
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>

<style scoped>

</style>
